<template>
  <div>
    <div style="margin: 0px 0px 20px 10px">
      <el-button type="danger" plain size="mini" style="margin: 20px,10px" @click="batchDelete">批量删除</el-button>
    </div>
    <el-tree
      :data="data"
      :props="defaultProps"
      ref="categoryTree"
      show-checkbox
      node-key="id"
      :default-expanded-keys="expanded_id"
      :expand-on-click-node="false"
      accordion>
      <!-- 解读 (增加的属性，方法等，都可以参考 elementUI Tree 树形控件 的文档说明)
        1. 使用 vue 的插槽机制在每个菜单后加入 Append 和 Delete 连接
        2. slot-scope="{ node, data } : 是一种解构写法, node 表示当前节点, data
        就是从数据库取出的分类对象信息
        3. 增加相应的 append(data) 和 remove(node, data) 方法
        4. :expand-on-click-node="false": 设置 false 表示点击 Append 和 Delete 连
        接 不展开下级分类
        5. show-checkbox 分类项显示成复选框，在删除时，可以支持多选
        6. node-key="id" 使用分类信息的 id 来唯一标识一个 node
        7.  :default-expanded-keys="expanded_id" 设置 绑定某个id默认展开该id所在节点及其全部子节点(用于删除时，仍保留在原树结构层次中)
        -->

      <!--
      完成业务需求：只有 1,2 级菜单可以 新增, 只有没有子分类的才可以 删除
      -->

      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ node.label }}</span>
        <!--只有 1,2 级菜单可以 新增-->
        <span>
          <el-button
            type="text"
            size="mini"
            v-if="node.level <= 2"
            @click="() => append(data)">
            新增
          </el-button>
          <!--只有没有子分类的才可以删除-->

          <el-button
            type="text"
            v-if="node.childNodes.length == 0"
            size="mini"
            @click="() => remove(node, data)">
            <span style="color: darkred">删除</span>
          </el-button>
          <!--修改 -->
            <el-button
              type="text"
              size="mini"
              @click="() => update(data)">
          <span style="color: chocolate">修改</span>
          </el-button>
        </span>
      </span>
    </el-tree>

    <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" width="36%">
      <el-form :model="category">
        <el-form-item label="商品类别名称 :" :label-width="formLabelWidth">
          <el-input v-model="category.name" autocomplete="off" style="width: 320px"></el-input>
        </el-form-item>
        <el-form-item label="品类优先级 :" :label-width="formLabelWidth">
          <el-select v-model="selectValue" placeholder="请选择品类优先级">
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品类别图标 :" :label-width="formLabelWidth">
          <el-input v-model="category.icon" autocomplete="off" style="width: 320px"></el-input>
        </el-form-item>
        <el-form-item label="商品类别单位 :" :label-width="formLabelWidth">
          <el-input v-model="category.proUnit" autocomplete="off" style="width: 320px"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="appendOrUpdate">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {data} from "autoprefixer";

export default {
  data() {
    return {
      category: { // 用于绑定添加类品信息
        // 自定义 category初始化属性
        id: null,
        name: '',
        parentId: 0,
        catLevel: 0,
        isShow: 0,
        sort: null,
        icon: '',
        proUnit: '',
        proCount: 0
      },
      options: [
        {id: 0, label: "普通", value: "普通"},
        {id: 1, label: "优先", value: "优先"},
        {id: 2, label: "最优先", value: "最优先"},
      ],
      selectValue: '普通', //用于options回显
      dialogType: '', // 用于判断dialog 的类型
      dialogTitle: '', //用于显示 不同类型的dialog 的标题
      formLabelWidth: '120px', // 用于绑定 展示添加类品界面 宽度
      dialogFormVisible: false, // 用于逻辑判断是否展示添加类品界面的变量
      expanded_id: [], // 用于绑定默认展开结点的id
      data: [], // 树形数据
      defaultProps: {
        children: 'childrenCategories', // 指定树形子结点所对应的属性
        label: 'name'  // 指定展示哪个属性的值作为tree的标识
      }
    }
  },
  methods: {
    appendOrUpdate() {
      if ('添加' == this.dialogType) {
        //如果是添加类型的 dialog 则确认之后执行添加的逻辑
        this.appendCategory();
      } else if ('修改' == this.dialogType) {
        this.updateCategory();
      }
    },
    updateCategory() {
      //对 category 的 类型进行转换
      if (this.selectValue == '普通') {
        this.category.sort = 0;
      } else if (this.selectValue == '优先') {
        this.category.sort = 1;
      } else if (this.selectValue == '最优先') {
        this.category.sort = 2;
      }
      // 解析需要修改的值
      let {id,name,sort,icon,proUnit} = this.category;
      // 修改商品品类请求提交到后台
      this.$http({
        url: this.$http.adornUrl('/commodity/category/update'),
        // url: 'http://localhost:9090/commodity/category/update',
        method: 'post',
        data: this.$http.adornData({id,name,sort,icon,proUnit}, false)
      }).then(({data}) => {
        if (data && data.code === 0) {
          // 提示信息
          this.$message({
            message: '商品类别信息更新成功',
            type: 'success'
          })
          // 重新刷新获取 最新的显示数据
          this.getCategories()
        } else {
          this.$message.error(data.msg)
        }
      })
      // 关闭添加类品界面
      this.dialogFormVisible = false
      this.expanded_id = [this.category.parentId]
    },
    update(data)
    {
      // 展示添加界面
      this.dialogFormVisible = true
      //指定 dialog 类型 和title
      this.dialogType = '修改'
      this.dialogTitle = this.dialogType + '商品类别'
      this.$http({
        url: this.$http.adornUrl(`/commodity/category/info/${data.id}`),
        // url: `http://localhost:9090/commodity/category/info/${data.id}`,
        method: 'get',
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.category = data.category
          if (this.category.sort == 0) {
            this.selectValue = '普通'
          } else if (this.category.sort == 1) {
            this.selectValue = '优先'
          } else if (this.category.sort == 2) {
            this.selectValue = '最优先'
          }
        } else {
          this.$message.error(data.msg)
        }
      })
    },
    appendCategory() {
      //对 category 的 类型进行转换
      if (this.selectValue == '普通') {
        this.category.sort = 0;
      } else if (this.selectValue == '优先') {
        this.category.sort = 1;
      } else if (this.selectValue == '最优先') {
        this.category.sort = 2;
      }
      // 添加商品品类到后台
      this.$http({
        url: this.$http.adornUrl(`/commodity/category/save`),
        // url: 'http://localhost:9090/commodity/category/save',
        method: 'post',
        data: this.$http.adornData(this.category, false)
      }).then(({data}) => {
        if (data && data.code === 0) {
          // 提示信息
          this.$message({
            message: '操作成功',
            type: 'success'
          })
          // 重新刷新获取 最新的显示数据
          this.getCategories()
        } else {
          this.$message.error(data.msg)
        }
        // 关闭添加类品界面
        this.dialogFormVisible = false
        // 保留在当前层级
        this.expanded_id = [this.category.parentId]
      })
    },
    append(data) {
      // 展示添加界面
      this.dialogFormVisible = true
      //指定 dialog 类型 和title
      this.dialogType = '添加'
      this.dialogTitle = this.dialogType + '商品类别'
      // 添加的时候 默认优先级为普通
      this.selectValue = '普通'
      // 初始化并绑定对应数据到 category上
      this.category.id = null
      this.category.icon = ''
      this.category.sort = null
      this.category.name = ''
      // data.catLevel * 1 将data.catLevel 转为Ingeter类型
      this.category.catLevel = data.catLevel * 1 + 1
      this.category.isShow = 1
      this.category.proUnit = ''
      this.category.proCount = 0
      // 设置 添加的商品品类的父级
      this.category.parentId = data.id
    },
    remove(node, data) {
      // console.log("node=>",node);
      let id = [data.id] // 获取删除的类品的id
      let name = data.name // 获取删除类品的name
      // 保留在原树结构层次中 -》 设置被删除的父节点 默认展开
      this.expanded_id = [node.parent.data.id]
      this.$confirm(`是否确认删除[${name}]商品类别?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => { // 确定删除的代码逻辑
        // 发送对应的请求 逻辑 删除某一商品
        this.$http({
          url: this.$http.adornUrl(`/commodity/category/delete`),
          // url: 'http://localhost:9090/commodity/category/delete',
          method: 'post',
          data: this.$http.adornData(id, false)
        }).then(({data}) => {
          if (data && data.code === 0) {
            // 提示信息
            this.$message({
              message: '操作成功',
              type: 'success'
            })
            // 重新刷新获取 最新的显示数据
            this.getCategories()
          } else {
            this.$message.error(data.msg)
          }
        })
      }).catch(() => {
      }) // 取消删除 - 什么都不做
    },
    //批量删除
    batchDelete(){
      /**
       * 解读 this.$refs.categoryTree.getCheckedNodes(leafOnly, includeHalfChecked)
       * 1. this.$refs.categoryTree : 代表 el-tree 控件
       * 2. getCheckedNodes(leafOnly, includeHalfChecked)
       * 2.1 若节点可被选择（即 show-checkbox 为 true），则返回目前被选中的节点所组成的数组
       * 2.2 (leafOnly, includeHalfChecked) 接收两个 boolean 类型的参数，
       *     1 leafOnly. 是否只是叶子节点，默认值为 false 2 includeHalfChecked. 是否包含半选节点，默认值为 false
       * 2.3 没有传入参数 , 等价getCheckedNodes(false, false), 即返回选中的分类节点(不包括半选的)
       * 2.4 半选就是某个分类的子分类, 只选择了部分，没有全选，是 - 符号
       */
      let checkedNodes = this.$refs.categoryTree.getCheckedNodes(false,false);
      //进行批量删除逻辑处理
      //获取批量删除 的 id 集合
      let delIds = []
      //获取批量删除 的 name 集合
      let delNames = []
      for (let i = 0; i < checkedNodes.length; i++) {
        delIds.push(checkedNodes[i].id)
        delNames.push(checkedNodes[i].name)
      }
      this.$confirm(`是否确认批量删除[${delNames}]商品类别?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => { // 确定删除的代码逻辑
        // 发送对应的请求 逻辑 删除某一商品
        this.$http({
          url: this.$http.adornUrl(`/commodity/category/delete`),
          // url: 'http://localhost:9090/commodity/category/delete',
          method: 'post',
          data: this.$http.adornData(delIds, false)
        }).then(({data}) => {
          if (data && data.code === 0) {
            // 提示信息
            this.$message({
              message: '批量删除成功',
              type: 'success'
            })
            // 重新刷新获取 最新的显示数据
            this.getCategories()
          } else {
            this.$message.error(data.msg)
          }
        })
      }).catch(() => {
      }) // 取消删除 - 什么都不做
    },

    getCategories() {  // 进行绑定树形格式数据 的 后台数据
      this.$http({
        // 直接自己指定
        url: this.$http.adornUrl(`/commodity/category/list/tree`),
        // url: 'http://localhost:9090/commodity/category/list/tree',
        method: 'get'
      }).then(({data}) => { // {data}: 表示返回的数据中key 为data 的子属性
        console.log(data)
        // 进行数据的绑定
        this.data = data.data
      })
    }
  },
  created() {
    this.getCategories()
  }
}
</script>

<style scoped>

</style>
